<template>
  <div id="id">
    <header class="header">
      <p>
        <span>数据评价监控配置</span>
        <!--<i @click="jumpDataEvaluationMonitoring">数据评价监控页面跳转</i>-->
      </p>
    </header>
    <main>
      <div class="btn">
        <el-button type="primary" @click="innerVisible = true"
          >添加数据</el-button
        >
        <el-button type="primary" @click="jumpConfig">配置</el-button>
      </div>
      <div class="tableSection">
        <el-table
          :data="tableData"
          style="width: 100%"
          @select="selectRow"
          @select-all="selectRowAll"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            :index="indexMethod"
            width="80"
            align="center"
          >
          </el-table-column>
          <el-table-column label="名称" width="380" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.label }}</span>
            </template>
          </el-table-column>
          <el-table-column label="阈值" width="200">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.thresholdValue
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="资源名称"  align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.resourceName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280" align="center">
            <template slot-scope="scope">
              <div class="configbtn">
                <el-button
                  type="danger"
                  v-show="scope.row.isPort === 0"
                  @click="deleteData(scope.$index, scope.row)"
                  >删除</el-button
                >

                <span
                  v-show="scope.row.isPort === 0"
                  class="configbtn_in"
                ></span>

                <el-button type="success" @click="showInnerVisible2(scope.row)"
                  >设置阈值</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!--<div>
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageConfig.currentPage"
              :page-sizes="pageConfig.pageSizes"
              :page-size="pageConfig.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageConfig.total"
            >
            </el-pagination>
          </div>
        </div>-->
      </div>
    </main>
    <!--添加数据弹窗-->
    <el-dialog
      width="500px"
      top="25vh"
      title="添加数据"
      :visible.sync="innerVisible"
      append-to-body
      :center="true"
      custom-class="setting-wrap"
    >
      <el-form label-width="80px" :model="formLabelAlign" ref="form">
        <el-form-item label="目录">
          <el-input
            v-model="formLabelAlign.resources"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="资源名称">
          <el-select
            v-model="formLabelAlign.resourceName"
            placeholder="请选择资源名称"
            @change="getSelectResources"
            value-key="iid"
          >
            <el-option
              v-for="item in resourceName"
              :label="item.Code"
              :value="item"
              :key="item.iid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="对象名称">
          <el-select
            v-model="formLabelAlign.name"
            placeholder="请选择对象名称"
            @change="getSelectField"
            value-key="iid"
          >
            <el-option
              v-for="item in resources"
              :label="item.Code"
              :value="item"
              :key="item.iid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字段">
          <el-select v-model="formLabelAlign.field" placeholder="请选择字段" value-key="iid">
            <el-option
              v-for="item in field"
              :label="item.fieldCode"
              :value="item"
              :key="item.iid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="监控方式">
          <el-select
            v-model="formLabelAlign.monitorMode"
            placeholder="请选择监控方式"
          >
            <el-option label="自增长id" value="0"></el-option>
            <el-option label="时间戳" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="阈值">
          <el-input
            v-model="formLabelAlign.threshold"
            placeholder="单位/分钟(请输入数字)"
            type="number"
          ></el-input>
        </el-form-item>
        <el-button type="success" @click="insterDate">提交</el-button>
      </el-form>
    </el-dialog>
    <!--设置阈值弹窗-->
    <el-dialog
      width="500px"
      top="25vh"
      title="添加数据"
      :visible.sync="innerVisible2"
      append-to-body
      :center="true"
      custom-class="setting-wrap"
    >
      <el-form label-width="80px" :model="formLabelAlign2" ref="form">
        <el-form-item label="阈值">
          <el-input v-model="formLabelAlign2.threshold"></el-input>
        </el-form-item>
        <el-button type="success" @click="configThresholdValue">提交</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  created() {
    //console.log(this.$route.query);
    //this.tableData = this.$route.query.treeValue[0].children;
    //axios.get("/monitor/getAllTableName").then((res) => {
    //  if (res && res.status === 200) {
    //    this.tableData = res.data.map((item, index) => {
    //      return { id: item.id, label: item.tableName };
    //    });
    //  }
    //});
    //this.pageConfig.total = 1;
    this.getTableData();
    this.getSelectResourceName();
  },

  //watch:{
  //  $route(to,from){
  //    tableData = to.query.treeValue[0].children;
  //    console.log('route变化')
  //  }
  //},
  data() {
    return {
      tableData: [],
      innerVisible: false,
      innerVisible2: false,
      formLabelAlign: {
        name: "",
        resources: "数据库资源",
        threshold: "",
        monitorMode: "",
        field: "",
        resourceName: "",
      },
      formLabelAlign2: { threshold: "" },
      pageConfig: {
        currentPage: 1,
        pageSizes: [5, 10],
        pageSize: 5,
        total: null,
      },
      value: [],
      scopeRow: null,
      mark: "", //用于防抖删除
      resourceName: [], //下拉列表资源名称数据
      resources: [], //下拉列表对象名称数据
      field: [], //下拉列表字段数据
    };
  },
  methods: {
    //页面跳转
    jumpDataEvaluationMonitoring() {
      this.$router.push("/");
    },
    // 每页条数变化处理函数
    handleSizeChange(val) {
      this.pageConfig.pageSize = val;
      this.getTableData();
    },
    // 当前页码变化处理函数
    handleCurrentChange(val) {
      this.pageConfig.currentPage = val;
      this.getTableData();
    },
    // 序号
    indexMethod(index) {
      let currentPageNum = this.pageConfig.currentPage - 1;
      let currentPageSize = this.pageConfig.pageSize;
      let num = currentPageNum * currentPageSize + (index + 1);
      return num;
    },
    // 获取tabel表格数据
    getTableData() {
      axios
        .get(
          //`/monitor/getAllTableName?pageNum=${this.pageConfig.currentPage}&pageSize=${this.pageConfig.pageSize}`
          `/monitor/getAllTableName`
        )
        .then((res) => {
          if (res && res.status === 200) {
            this.tableData = res.data.map((item, index) => {
              return {
                id: item.id,
                label: item.tableName,
                thresholdValue: item.thresholdValue,
                isPort: item.isPort,
                resourceName: item.resourceName,
              };
            });
            //this.pageConfig.total = res.data.totalSize;
          }
        });
    },
    //表格选择
    selectRow(selection, row) {
      this.value = selection;
      //console.log('单个',selection);
    },
    selectRowAll(selection) {
      this.value = selection;
      //console.log('全部',selection);
    },
    //配置完成后跳转到评价监控
    jumpConfig() {
      //this.$router.push({
      //  path: "/",
      //  query: { value: this.value },
      //});
      // this.$router.push("/");
      this.$router.go(-1);
      //this.$bus.$emit('inConfig',this.value)
      //console.log(this.value)
      //console.log(this.$store)
      this.$store.commit("setZongValue", this.value);
      //console.log(this.$store.state.app.zongValue)
    },
    //添加数据
    insterDate() {
      if (
        this.formLabelAlign.name !== "" &&
        this.formLabelAlign.resources !== "" &&
        this.formLabelAlign.threshold !== "" &&
        this.innerVisible === true
      ) {
        this.innerVisible = false;

        axios
          .post("/monitor/addTableMessage1", {
            tableName: this.formLabelAlign.name,
            thresholdValue: this.formLabelAlign.threshold,
            monitorMode: this.formLabelAlign.monitorMode,
            resourceName: this.formLabelAlign.resourceName,
            field: this.formLabelAlign.field,
          })
          .then(() => {
            //this.getSelectResourceName();
            this.getTableData();
            this.formLabelAlign = {
              name: "",
              resources: "数据库资源",
              threshold: "",
              monitorMode: "",
              field: "",
              resourceName: "",
            };
            this.resources = [];
            this.field = [];
          });
        console.log(this.formLabelAlign);
      }
    },
    //删除数据
    deleteData(index, row) {
      if (this.mark === "" || this.mark !== row.id) {
        axios.get(`/monitor/delTableMessage?id=${row.id}`).then((res) => {
          if (res.data === "删除成功") {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getTableData();
          } else if (res.data === "接口表数据，无法删除") {
            this.$message({
              message: "无法删除",
              type: "error",
            });
          }
        });
        this.mark = row.id;
        //this.getSelectResourceName();
      }
    },
    //显示阈值弹窗
    showInnerVisible2(row) {
      this.innerVisible2 = true;
      this.scopeRow = row;
    },
    //设置阈值
    configThresholdValue() {
      this.innerVisible2 = false;
      if (this.formLabelAlign2.threshold !== "") {
        axios
          .get(
            `/monitor/setThresholdValue?id=${this.scopeRow.id}&num=${this.formLabelAlign2.threshold}`
          )
          .then((res) => {
            if (res && res.status === 200) {
              this.getTableData();
            }
          });
      }
    },
    //添加数据对象资源下拉框数据
    getSelectResourceName() {
      axios.get("/monitor/selectResources").then((res) => {
        this.resourceName = res.data.data;
        //为对象加个属性,解决el-selct bug
        this.resourceName.forEach((element, index) => {
          element.iid = index;
        });
      });
    },
    //添加数据对象名称下拉框数据
    getSelectResources(val) {
      axios
        .get(`/monitor/selectObject?correntIds=${val.currentId}`)
        .then((res) => {
          this.resources = res.data.data;
          //为对象加个属性,解决el-selct bug
          this.resources.forEach((element, index) => {
            element.iid = index;
          });
        });
    },
    //添加数据字段下拉框数据
    getSelectField(val) {
      console.log(typeof val.currentId )
      axios
        //.get(encodeURI(`/monitor/selectField?correntIds=${val.currentId}`))
        .get(`/monitor/selectField?correntIds=${val.currentId}`)
        .then((res) => {
          console.log(res);
          this.field = res.data.data;
          this.field.forEach((element, index) => {
            element.iid = index;
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
#id {
  position: relative;
  height: 100vh;
  .header {
    width: 100%;
    height: 60px;
    background: #2b2b2b;
    opacity: 1;
    line-height: 60px;
    p {
      margin-left: 36px;
      color: white;
      font-size: 16px;
      i {
        display: block;
        margin-right: 30px;
        font-style: normal;
        color: #909399;
        cursor: pointer;
        float: right;
      }
    }
  }
  main {
    height: 100%;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 30px;
    .btn {
      width: 100%;
      height: 48px;
      margin-top: 10px;
      overflow: hidden;
      padding-right: 8px;

      .el-button {
        float: right;
        margin-left: 5px;
      }
    }

    .el-table {
      font-size: 19px;
      .configbtn {
        width: 180px;
        margin: 0 auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .configbtn_in {
          border: solid 1px #d9dadd;
          margin: 0 5px;
          height: 20px;
        }
      }
    }
    .el-checkbox__inner {
      width: 18px;
      height: 18px;
    }
    .tableSection {
      height: calc(100vh - 168px);
      border: dashed 1px #707070;
      padding: 15px 20px 10px 20px;
      position: relative;
      .pagination {
        position: absolute;
        bottom: 30px;
        right: 30px;
      }
      overflow: auto;
    }
  }
  //::v-deep .setting-wrap{
  //  ::v-deep .el-form{
  //    span{
  //      margin-left: 50%;
  //    transform: translate(-50%,0);
  //    }

  //  }
  //}
}
::v-deep .setting-wrap {
  .el-dialog__header {
    padding-top: 20px;
    .el-dialog__title {
      font-size: 24px;
      line-height: 30px;
    }
  }
  .el-dialog__body {
    padding-top: 0;
    padding-bottom: 30px;
    font-size: 24px;
    .el-form {
      text-align: center;
      font-size: 20px;
    }
  }
}
::v-deep .el-form-item__label {
  font-size: 16px;
  font-weight: 600;
}
::v-deep .el-input {
  font-size: 16px;
}
::v-deep .el-select {
  width: 100%;
}
</style>